<template>
	<view class="page_content">
		<view class="bottom-view_2">
			<view class="bottom_btn_2" @click.stop="recoverDefaultSetting">恢复默认</view>
			<view class="bottom_btn" @click.stop="saveSetting">保存设置</view>
		</view>
		<view class="scroll_content">
			<scroll-view scroll-y="true" :show-scrollbar="false" enhanced="true"  enable-flex="true">
				<view class="common_card" :style="index == 0 ? 'margin-top: 32rpx;' : ''" v-for="(item,index) in list" :key="index">
					<view class="title_row">
						<view class="common-bold-title">{{item.title}}</view>
						<u-switch v-model="item.selected"  size="48"></u-switch>
					</view>
					<view class="title_setting">
						<view class="title_col">
							<view class="device_sn">下限制</view>
							<view class="input_border">
								<input type="digit" class="input_text" v-model="item.min""/>
							</view>
							
						</view>
						<view class="title_col">
							<view class="device_sn">上限制</view>
							<view class="input_border">
								<input type="digit" class="input_text" v-model="item.max"/>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defConfig:{
					componentGoodsId:null,
					id:''
				},
        currentComponentGoodId:null,
				list:[
					{
						selected:false,
						min:0,
						max:0,
						key:'temperature',
						title:'温度告警'
					},
					{
						selected:false,
						min:0,
						max:0,
						key:'humidity',
						title:'湿度告警'
					},
					{
						selected:false,
						min:0,
						max:0,
						key:'voltage',
						title:'电压告警'
					},
					{
						selected:false,
						min:0,
						max:0,
						key:'electric',
						title:'电流告警'
					}
				]
			}
		},
		onLoad() {
			let self = this;
			console.log("this",self.$Route.query);
			self.$progressHud.showLoading();
      self.currentComponentGoodId = self.$Route.query.id;
			self.$NetApi.getMethod('/loyu-api/app/component/config',{
				componentGoodsId:self.$Route.query.id || 0
			}).then(ok => {
				self.$progressHud.hideLoading();
				self.defConfig = ok.data.defConfig || {};
				
				let config = ok.data.goodsConfig || self.defConfig
				self.updateList(config)
				self.defConfig.id = config.id || ''
			}, fail => {
				self.$progressHud.hideLoading();
				self.$progressHud.showToast(fail.errMsg || '网络错误');
			})
		},
		methods: {
			updateList(config){
				for (var index = 0; index < this.list.length; index++) {
					var element = this.list[index];
					
					if(config && config.hasOwnProperty(element.key + 'Switch')) {
						let value = config[element.key + 'Switch'];
						if(typeof value == 'number' || typeof value == 'string') {
							element.selected = value > 0 ? true : false
						} else if(typeof value == 'boolean') {
							element.selected = value
						} else {
							element.selected = false
						}
					} else {
						element.selected = false
					}
					
					if(config && config.hasOwnProperty(element.key + 'Below')) {
						let value = config[element.key + 'Below'];
						if(typeof value == 'string') {
							element.min = parseInt(value);
						} else {
							element.min = value;
						}
					} else {
						element.min = 0
					}
					
					if(config && config.hasOwnProperty(element.key + 'Upper')) {
						let value = config[element.key + 'Upper'];
						if(typeof value == 'string') {
							element.max = parseInt(value);
						} else {
							element.max = value;
						}
					} else {
						element.max = 0
					}
				}
			},
			getParams(){
				var params = {}
				for (var index = 0; index < this.list.length; index++) {
					var element = this.list[index];
					params[element.key + 'Switch'] = element.selected ? 1 : 0;
					params[element.key + 'Below'] = parseInt(element.min);
					params[element.key + 'Upper'] = parseInt(element.max);
				}
				return params;
			},
			recoverDefaultSetting(){
				this.updateList(this.defConfig || {})
			},
			saveSetting(){
				var params = this.getParams();
        if(this.goodsConfig !=null){
          params['id'] = this.goodsConfig.id;
          params['componentGoodsId'] = this.goodsConfig.componentGoodsId;
        }else{
          params['componentGoodsId'] = this.currentComponentGoodId;
        }

				
				let self = this;
				self.$progressHud.showLoading();
				self.$NetApi.postMethod('/loyu-api/app/component/save-config',params).then(ok => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast('设置成功');
					uni.navigateBack();
				}, fail => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFF;
	}
	.page_content {
		width: 100%;
		height: 100%;
	}
	.common_card{
		border-radius: 24rpx;
		background-color: #ffffff;
		// background-color: #f00;
		box-shadow: 0rpx 2rpx 4px 0rpx rgba(0, 0, 0, 0.05);
		padding: 32rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		width: calc(100% - 64rpx);
		flex-shrink: 0;
		overflow: clip;
		row-gap: 24rpx;
		margin-bottom: 48rpx;
		
		display: flex;
		flex-direction: column;
	}
	.title_row{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.common-bold-title{
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 48rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.title_col{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 8rpx;
		flex: 1;
	}
	.title_setting{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		column-gap: 32rpx;
	}
	.input_border{
		border-radius: 8rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 2rpx solid #E5E7EB;
		padding: 16rpx 24rpx;
	}
	.device_sn{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		height: 40rpx;
		letter-spacing: normal;
		color: #4B5563;
	}
	.input_text{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 44rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.switchCss{
		width: 88rpx;
		height: 48rpx;
	}
	.bottom-view_2{
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 0px;
		
		background-color: #FFF;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-top: 32rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
		
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		column-gap: 32rpx;
	}
	.bottom_btn{
		border-radius: 8rpx;
		background: $power-color-primary;
		width: 100%;
		text-align: center;
		color: #FFF;
		
		
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		height: 90rpx;
		line-height: 90rpx;
		letter-spacing: normal;
	}
	.scroll_content{
		height: calc(100% - 64rpx - 90rpx - env(safe-area-inset-bottom));
		margin-bottom: 156rpx;
		overflow: auto;
	}
	.bottom_btn_2{
		border-radius: 8rpx;
		background: #FFF;
		width: 100%;
		text-align: center;
		color: $power-color-primary;
		border: 2rpx solid $power-color-primary;
		
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		height: 90rpx;
		line-height: 90rpx;
		letter-spacing: normal;
	}

</style>
